<template>
    <div class="layui-card layui-form" id="modal">
        <!-- 房屋信息 -->
        <div class="layui-card-header layui-bg-cyan">房屋信息</div>
        <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label">房屋所在区域</label>
                <div class="layui-input-block">
                    <select name="district" lay-verify="required" lay-filter="district">
                        <option value="1">榆阳区</option>
                        <option value="2">开发区</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房屋详细地址</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="text" lay-verify="required" name="address">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房屋结构</label>
                <div class="layui-input-block">
                    <select name="structure" lay-verify="required" lay-filter="structure">
                        <option value="1">混合</option>
                        <option value="2">钢筋混泥土</option>
                        <option value="2">砖混</option>
                        <option value="2">木或砖木</option>
                        <option value="2">钢</option>
                        <option value="2">其他</option>
                        <option value="2">框架</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">不动产登记证书号码</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="text" lay-verify="number" name="rightsStr">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">租赁用途</label>
                <div class="layui-input-block">
                    <select name="purpose" lay-verify="required" lay-filter="purpose">
                        <option value="1">住宅</option>
                        <option value="2">商业</option>
                        <option value="2">其他</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">租赁面积(㎡)</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="text" lay-verify="required|number" name="lease_area">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年租金(元)</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="text" lay-verify="required|number" name="lease_price">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">租赁开始日期</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="text" id="lease_start_at" lay-verify="required|date" name="lease_start_at">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">租赁结束日期</label>
                <div class="layui-input-block">
                    <input class="layui-input" id="lease_end_at" type="text" lay-verify="required|date" name="lease_end_at">
                </div>
            </div>
        </div>
        <!-- 出租方信息 -->
        <div class="layui-card-header layui-bg-green">出租方信息</div>
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief" lay-filter="lessorTab" id="lessorTab">
                <ul class="layui-tab-title">
                    <li class="layui-this">个人</li>
                    <li>单位/公司</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" v-if="lessorTabIndex==0">
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="required|title" name="membersName1">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">身份证号码</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="required|identity" name="membersId_no1">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机号码</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="required|phone" name="membersTel">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">配偶姓名</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="title" name="membersName2">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">配偶身份证号码</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="identity" name="membersId_no2">
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item" v-else="lessorTabIndex==1">
                        <div class="layui-form-item">
                            <label class="layui-form-label">单位/公司名称</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="required|title" name="unitName">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">联系方式</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="required|phone" name="unitTel">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">营业执照代码</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="required|number" name="business_certificate_no">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">事业单位法人证书代码</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="number" name="public_institution_no">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">法人姓名</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="title" name="legal_personName">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">法人身份证号码</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="identity" name="legal_personId_no">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">法人联系方式</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="phone" name="legal_personTel">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 承租方信息 -->
        <div class="layui-card-header layui-bg-blue">承租方信息</div>
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief" lay-filter="lesseeTab" id="lesseeTab">
                <ul class="layui-tab-title">
                    <li class="layui-this">个人</li>
                    <li>单位/公司</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" v-if="lesseeTabIndex==0">
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="required|title" name="membersName1">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">身份证号码</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="required|identity" name="membersId_no1">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机号码</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="required|phone" name="membersTel">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">配偶姓名</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="title" name="membersName2">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">配偶身份证号码</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="identity" name="membersId_no2">
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item" v-else="lesseeTabIndex==1">
                        <div class="layui-form-item">
                            <label class="layui-form-label">单位/公司名称</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="required|title" name="unitName">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">联系方式</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="required|phone" name="unitTel">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">营业执照代码</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="required|number" name="business_certificate_no">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">事业单位法人证书代码</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="number" name="public_institution_no">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">法人姓名</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="title" name="legal_personName">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">法人身份证号码</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="identity" name="legal_personId_no">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">法人联系方式</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" lay-verify="phone" name="legal_personTel">
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 附件 -->
        <div class="layui-card-header layui-bg-orange">附件上传</div>
        <div class="layui-card-body">
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-sm" id="uploadBtn">点击上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm">
                    预览图：
                    <div class="layui-upload-list" id="previewBox"></div>
                </blockquote>
            </div>
        </div>
        <!-- 提交 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="submitBtn">立即提交</button>
                <button type="button" class="layui-btn layui-btn-primary">保存</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Modal",
    data() {
        return {
            lessorTabIndex: 0,
            lesseeTabIndex: 0
        };
    },
    mounted() {
        var that = this;
        layui.use(["element", "layer", "form", "upload"], function() {
            var element = layui.element;
            var layer = layui.layer;
            var form = layui.form;
            var upload = layui.upload;
            upload.render({
                elem: "#uploadBtn",
                url: "/upload/",
                multiple: true,
                before: function(obj) {
                    obj.preview(function(index, file, result) {
                        $("#previewBox").append(
                            `<img src="${result}" class="layui-upload-img" style="width: 120px;height: 100px;">`
                        );
                    });
                },
                done: function(res) {
                    //上传完毕
                }
            });
            element.on("tab(lessorTab)", function(data) {
                $("#lessorTab .layui-tab-item").attr("style", "display:block;");
                that.lessorTabIndex = data.index;
            });
            element.on("tab(lesseeTab)", function(data) {
                $("#lesseeTab .layui-tab-item").attr("style", "display:block;");
                that.lesseeTabIndex = data.index;
            });
            form.on("submit(submitBtn)", function(data) {
                layer.alert(JSON.stringify(data.field), {
                    title: "最终的提交信息"
                });
                return false;
            });
        });
    }
};
</script>

<style scoped>
#modal {
    display: none;
}
.layui-form-label {
    width: 100px;
    padding: 9px 0;
}
</style>

